<template>
  <el-card>
    <div slot="header">
      <span>订单管理</span>
    </div>
    <div class="content">
      <!-- form表单 -->
      <el-form :inline="true" :model="formInline" size="small">
        <!-- 订单号 -->
        <el-form-item label="订单号">
          <el-input
            v-model="formInline.orderNo"
            prop=""
            placeholder="订单号"
          ></el-input>
        </el-form-item>
        <!-- 收货人 -->
        <el-form-item label="收货人 ">
          <el-input
            v-model="formInline.consignee"
            placeholder="收货人"
          ></el-input>
        </el-form-item>
        <!-- 手机号 -->
        <el-form-item label="手机号">
          <el-input v-model="formInline.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <!-- 订单状态 -->
        <el-form-item label="订单状态">
          <el-select v-model="formInline.orderState" placeholder="订单状态">
            <el-option value="已受理">已受理</el-option>
            <el-option value="派送中">派送中</el-option>
            <el-option value="已完成">已完成</el-option>
          </el-select>
        </el-form-item>
        <!-- 选择时间 -->
        <el-form-item label="选择时间">
          <el-date-picker
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="formInline.date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <!-- 查询 -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="danger" @click="formReset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- table表格 -->
      <el-table :data="tableData" border :style="{ width: w + 'px' }">
        <!-- 订单号 -->
        <el-table-column fixed prop="orderNo" label="订单号"> </el-table-column>
        <!-- 下单时间 -->
        <el-table-column label="下单时间" width="200px">
          <template slot-scope="scope">
            {{ scope.row.orderTime | formaDate }}
          </template>
        </el-table-column>
        <!-- 手机号 -->
        <el-table-column prop="phone" label="手机号"> </el-table-column>
        <!-- 收货人 -->
        <el-table-column prop="consignee" label="收货人"> </el-table-column>
        <!-- 配送地址 -->
        <el-table-column prop="deliverAddress" label="配送地址">
        </el-table-column>
        <!-- 送达时间 -->
        <el-table-column label="送达时间" width="200px">
          <template slot-scope="scope">
            {{ scope.row.deliveryTime | formaDate }}
          </template>
        </el-table-column>
        <!-- 用户备注 -->
        <el-table-column prop="remarks" label="用户备注"> </el-table-column>
        <!-- 订单金额 -->
        <el-table-column prop="orderAmount" label="订单金额"> </el-table-column>
        <!-- 订单状态 -->
        <el-table-column prop="orderState" label="订单状态"> </el-table-column>
        <!--  操作-->
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button @click="handleEdit(scope.row)" type="text" size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total,prev, pager, next, jumper"
          :total="this.total"
        >
        </el-pagination>
      </div>

      <!-- 查看模态框 -->
      <el-dialog
        title="订单查看"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <el-form-item label="订单号">
            <el-input v-model="formLabelAlign.orderNo"></el-input>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-input v-model="formLabelAlign.orderTime">
              <template slot-scope="scope">
                {{ scope.row.orderTime | formaDate }}
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="formLabelAlign.phone"></el-input>
          </el-form-item>
          <el-form-item label=" 收货人">
            <el-input v-model="formLabelAlign.consignee"></el-input>
          </el-form-item>
          <el-form-item label=" 配送地址">
            <el-input v-model="formLabelAlign.deliverAddress"></el-input>
          </el-form-item>
          <el-form-item label="送达时间">
            <el-input v-model="formLabelAlign.deliveryTime">
              <template slot-scope="scope">
                {{ scope.row.deliveryTime | formaDate }}
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="用户备注">
            <el-input v-model="formLabelAlign.remarks"></el-input>
          </el-form-item>
          <el-form-item label="订单金额 ">
            <el-input v-model="formLabelAlign.orderAmount"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-input v-model="formLabelAlign.orderState"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 编辑模态框 -->
      <el-drawer
        title="订单编辑"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleEditClose"
      >
        <el-form
          class="editForm"
          :label-position="labelPosition"
          label-width="80px"
          :model="editForm"
        >
          <el-form-item label="订单号">
            <el-input v-model="editForm.orderNo"></el-input>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-input v-model="editForm.orderTime">
              <template slot-scope="scope">
                {{ scope.row.orderTime | formaDate }}
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="editForm.phone"></el-input>
          </el-form-item>
          <el-form-item label=" 收货人">
            <el-input v-model="editForm.consignee"></el-input>
          </el-form-item>
          <el-form-item label=" 配送地址">
            <el-input v-model="editForm.deliverAddress"></el-input>
          </el-form-item>
          <el-form-item label="送达时间">
            <el-input v-model="editForm.deliveryTime">
              <template slot-scope="scope">
                {{ scope.row.deliveryTime | formaDate }}
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="用户备注">
            <el-input v-model="editForm.remarks"></el-input>
          </el-form-item>
          <el-form-item label="订单金额 ">
            <el-input v-model="editForm.orderAmount"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-input v-model="editForm.orderState"></el-input>
          </el-form-item>
          <el-form-item class="editBtn">
            <el-button size="small" @click="dialogVisible = false"
              >取 消</el-button
            >
            <el-button size="small" type="primary" @click="handleEditForm"
              >确 定</el-button
            >
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
  </el-card>
</template>

<script>
import { orderList, editForm } from "../../api/order";
export default {
  data() {
    return {
      //订单数据
      formInline: {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: [],
      },
      //时间数据
      // value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      // value:this.formInline.date,

      //表格数据
      tableData: [],
      //表格样式
      w: document.body.clientWidth - 300,
      //页码数据
      currentPage: 1,
      pageSize: 5,
      total: 0,
      //查看模态框
      dialogVisible: false,
      //模态框  查看数据
      labelPosition: "right",
      formLabelAlign: {},
      //模态框  编辑数据
      drawer: false, //模态框的状态
      direction: "rtl", //从右边出现
      editForm: {},
    };
  },
  methods: {
    //查询按钮  form表单
    onSubmit() {
      this.currentPage = 1;
      //把查询到的参数 深拷贝一次
      let searchParams = JSON.parse(JSON.stringify(this.formInline));
      console.log(this.formInline);

      console.log(this.formInline, "查询");
      //把dat额处理成字符串格式的数组
      searchParams.date = JSON.stringify(searchParams.date);
      //调用获取数据的方法   把查询参数传入
      this.getData(searchParams);
    },

    //重置按钮 form表单
    formReset() {
      this.formInline = {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: [],
      };
      this.onSubmit();
    },
    //查询按钮   table表格
    handleClick(row) {
      // console.log(row);
      //查看模态框状态
      this.dialogVisible = true;
      //解构数据
      let {
        id,
        orderNo,
        orderTime,
        phone,
        consignee,
        deliverAddress,
        deliveryTime,
        remarks,
        orderAmount,
        orderState,
      } = row;
      //回填数据
      this.formLabelAlign = {
        id,
        orderNo,
        orderTime,
        phone,
        consignee,
        deliverAddress,
        deliveryTime,
        remarks,
        orderAmount,
        orderState,
      };
    },
    //编辑按钮  table表格
    handleEdit(row) {
      // console.log(row);
      //查看模态框状态
      this.drawer = true;
      //解构数据
      let {
        id,
        orderNo,
        orderTime,
        phone,
        consignee,
        deliverAddress,
        deliveryTime,
        remarks,
        orderAmount,
        orderState,
      } = row;
      //数据回填
      this.editForm = {
        id,
        orderNo,
        orderTime,
        phone,
        consignee,
        deliverAddress,
        deliveryTime,
        remarks,
        orderAmount,
        orderState,
      };
    },

    //点击确定按钮 保存数据并传回后台
    async handleEditForm() {
      let res = await editForm(this.editForm);
      console.log(res, "res");
      //解构
      let { code, msg } = res.data;
      if(code===0){
        this.$message.success(msg)
        this.getData()//拉一下数据

      }else{
        this.$message.error(msg)
      }
      this.drawer = false; //模态框状态修改
    },

    //查看模态框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //编辑模态框
    handleEditClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //页码
    //每页多少条数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    //这是第几页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    //表格获取数据
    async getData(searchParams = {}) {
      let res = await orderList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        ...searchParams,
      });
      //解构
      let { total, data } = res.data;
      //赋值渲染
      this.tableData = data;
      this.total = total;
    },
    //表格窗口大小变化函数
    resizeBy() {
      this.w = document.body.clientWidth - 300;
    },
  },
  //生命周期
  created() {
    //进入页面  调用方法  获取数据

    this.getData();

    //监听窗口大小变化
    window.addEventListener("resize", this.resize);
  },
  //销毁前
  beforeDestroy() {
    window.removeEventListener("resize", this.resize);
  },
};
</script>

<style lang="less" scoped>
.editBtn {
  display: flex;
  justify-content: flex-end;
  padding-right: 10px;
}
</style>